<template>
    <div class="app-container">       
       <el-row>
           <el-col :span="24">
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row style="border-radius: 4px;">
                        <el-col :span="12">
                            <el-form-item label="路由名称：" prop="name">
                                <el-input v-model="form.name" placeholder="请输入路由名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务绑定：" prop="service">
                                <el-select v-model="form.service.id" placeholder="请选择协议类型">
                                    <el-option v-for="item in services" :key="item.name" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>                
                    </el-row>
                    

                    <!-- 标签  -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="标签：" prop="tags">
                                <el-tag :key="tag" v-for="tag in form.tags" closable 
                                :disable-transitions="false" 
                                @close="handleTagClose('tag',tag)">
                                    {{tag}}
                                </el-tag>
                                <el-input v-model.trim="inputTagValue" placeholder="输入请求路径 标签 信息，按enter键确认"
                                @keyup.enter.native="handleInputTagConfirm('tag')"
                                @blur="handleInputTagConfirm('tag')"
                                ></el-input>
                            </el-form-item>                    
                        </el-col>
                    </el-row>

                    <!-- 主机 host -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="Hosts：" prop="hosts">
                                <el-tag :key="host" v-for="host in form.hosts" closable 
                                :disable-transitions="false" 
                                @close="handleTagClose('host',host)">
                                    {{host}}
                                </el-tag>
                                
                                <span slot="label">
                                    <el-tooltip content="字符串，用于客户端请求头中，用于根据Host路由" placement="right-end">
                                    <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    Host：
                                </span>

                                <el-input v-model.trim="inputHostValue" placeholder="输入Host信息，按enter键确认"
                                @keyup.enter.native="handleInputTagConfirm('host')"
                                @blur="handleInputTagConfirm('host')"
                                ></el-input>
                            </el-form-item>                    
                        </el-col>
                    </el-row>
                    
                    <!-- path  -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="Paths：" prop="paths">
                                <el-tag :key="path" v-for="path in form.paths" closable 
                                :disable-transitions="false" 
                                @close="handleTagClose('path',path)">
                                    {{path}}
                                </el-tag>
                                
                                <span slot="label">
                                    <el-tooltip content="与此 Route 匹配的路径列表。使用表单编码，/foo " placement="right-end">
                                    <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    请求路径：
                                </span>

                                <el-input v-model.trim="inputPathValue" placeholder="输入请求路径 path 信息，按enter键确认"
                                    @keyup.enter.native="handleInputTagConfirm('path')"
                                    @blur="handleInputTagConfirm('path')"
                                    ></el-input>
                            </el-form-item>                    
                        </el-col>
                    </el-row>

                    <!-- 请求方法  -->
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="请求方法：" prop="methods">
                                <el-tag :key="method" v-for="method in form.methods" closable 
                                :disable-transitions="false" 
                                @close="handleTagClose('method',method)">
                                    {{method}}
                                </el-tag>
                                <span slot="label">
                                    <el-tooltip content="与此路由匹配的 HTTP 方法列表 GET 、 HEAD 、POST、 PUT 、DELETE 、CONNECT、  OPTIONS、  TRACE、 PATCH" placement="right-end">
                                    <i class="el-icon-question"></i>
                                    </el-tooltip>
                                    请求方法：
                                </span>
                                <el-input v-model="inputMethodValue" placeholder="输入请求路径 请求方法 信息，按enter键确认"
                                @keyup.enter.native="handleInputTagConfirm('method')"
                                @blur="handleInputTagConfirm('method')"
                                ></el-input>
                                
                            </el-form-item>                    
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="路径处理:" prop="path_handling">
                                <el-radio v-model="form.path_handling" label="v0">v0</el-radio>
                                <el-radio v-model="form.path_handling" label="v1">v1</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="截断path：" prop="strip_path">
                                <el-switch v-model="form.strip_path" ></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="保留主机：" prop="preserve_host">
                                <el-switch v-model="form.preserve_host" ></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="正则优先级：" prop="regex_priority">
                                <el-input type="number" v-model="form.regex_priority" placeholder="请输入路由名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> 

                </el-form>
           </el-col>
       </el-row>
        

        <el-row type="flex" justify="end">
            <el-col :span="12">
                 <el-button type="primary" @click="submitForm">{{formBtnText}}</el-button>
                 <el-button @click="cancel">取 消</el-button>
            </el-col>
        </el-row>  
    </div>
</template>
<script>
import { kongServiceList} from "@/api/kong/service";
import { kongRouteAdd,kongRouteUpdate } from "@/api/kong/routes"
export default {
    props:{
        route:{
            type: Object,
            required: false,
        },
        operate:{
            type:String,
            required: false,
            default: "add"
        },
        serviceId:{
            type: String,
            required: false,
        }

    },
    data(){
        return{
            // 服务列表
            services:[],
            // 表单字段定义
            form:{
                name: null,
                hosts: [],
                protocols: null,
                paths: [],
                tags: [],
                service: {
                    id: null
                },
                //控制向上游发送请求时如何组合服务路径、路由路径和请求的路径
                path_handling: "v1",
                //当通过其中之一paths匹配路由时，从上游请求 URL 中去除匹配的前缀。默认为true.
                strip_path: false,
                //当多个路由同时使用正则表达式匹配时，用于选择哪个路由解析给定请求的数字。
                //当两条路由与路径匹配并且具有相同的 时regex_priority，将使用较旧的（最低的created_at）。
                //请注意，非正则表达式路由的优先级是不同的（较长的非正则表达式路由在较短的路由之前匹配）。默认为0.
                regex_priority: 0,
                //通过hosts域名之一匹配路由时，请使用Host上游请求标头中的请求标头  如果设置为false，上游标Host头将是服务的host.
                preserve_host: false,
                methods:[],
            },
            rules:{                
                name: [
                    { required: true, message: "路由名不能为空", trigger: "blur" },
                ],
                service: [
                    {required: true, message: "必须绑定一个服务", trigger: "blur"}
                ],
                tags: [
                    {required: true, message: "必填项,与 Route 关联的一组字符串，用于分组和过滤", trigger: "blur"}
                ],
                paths:[
                ],
            },
            // host 输入值
            inputHostValue:'',
            // path 输入值
            inputPathValue: '',
            // tag 输入值
            inputTagValue: '',
            // tag 输入值
            inputMethodValue: '',
            // 表单按钮 问题内容
            formBtnText:"确认",

            
            

        }
    },
    created(){    
        if(this.route){
            this.form=this.route || this.form;
            // console.log(JSON.stringify(this.form))
            if(!this.form.hosts){
                this.form.hosts=[]
            }

            if(!this.form.tags){
                this.form.tags =[]
            }

            if(!this.form.paths){
                this.form.paths =[]
            }

            if(!this.form.methods){
                this.form.methods=[]
            }
        }
        if(this.operate == "edit"){
            this.formBtnText="修改";
        }else{
            this.formBtnText="确认";
        }    
        this.getServices();
        
        console.log("add route service id :"+this.serviceId)
        if(this.serviceId){
            this.form.service.id=this.serviceId
        }
    },
    methods:{
        // 删除标签
        handleTagClose(type,value){
            if(type==="host"){
                this.form.hosts.splice(this.form.hosts.indexOf(value),1);
            }
            if(type==="tag"){
                this.form.tags.splice(this.form.tags.indexOf(value),1);
            }
            if(type==="path"){
                this.form.paths.splice(this.form.paths.indexOf(value),1);
            }
            if(type==="method"){
                this.form.methods.splice(this.form.methods.indexOf(value),1);
            }

        },
        // 标签确认
        handleInputTagConfirm(type){
            if(type==="host"){
                let inputValue=this.inputHostValue;
                if(inputValue){   
                    if(this.form.hosts.indexOf(inputValue)>-1){
                        this.inputHostValue="";
                        return;
                    }
                    this.form.hosts.push(inputValue);
                    this.inputHostValue="";                 
                }
            }

            if(type==="tag"){
                let inputValue=this.inputTagValue ;
                if(inputValue){
                    if(this.form.tags.indexOf(inputValue)>-1){
                        this.inputTagValue="";
                        return;
                    }
                    this.form.tags.push(inputValue);
                    this.inputTagValue="";
                }
            }

            if(type==="path"){
                let inputValue=this.inputPathValue;
                if(inputValue){
                    if(this.form.paths.indexOf(inputValue)>-1){
                        this.inputPathValue="";
                        return;
                    }
                    this.form.paths.push(inputValue);
                    this.inputPathValue="";
                }
            }

            if(type==="method"){
                let inputValue=this.inputMethodValue ;
                if(inputValue){
                    if(this.form.methods.indexOf(inputValue)>-1){
                        this.inputMethodValue="";
                        return;
                    }
                    this.form.methods.push(inputValue);
                    this.inputMethodValue="";
                }
            }

        },
        // 表单提交
        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;

                if(this.operate=="add"){
                    // console.log(this.form);
                    kongRouteAdd(this.form).then(res =>{
                        console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"成功");
                    })
                }
                
                if(this.operate =="edit"){
                    kongRouteUpdate(this.form).then(res =>{
                        console.log(JSON.stringify(res));
                        // 重置表单
                        this.reset();
                        this.$emit('callback',"成功");
                    })
                }
            })

        },
        // 表单取消
        cancel(){
            // 重置表单
            this.reset();
            // 关闭窗口
            this.$emit('callback',"已取消新增操作");

        },
        // 表单重置
        reset(){
            
            // 表单字段定义
            this.form={
                name: null,
                hosts: [],
                protocols: null,
                paths: [],
                tags: [],
                service: {
                    id: null
                },
                //控制向上游发送请求时如何组合服务路径、路由路径和请求的路径
                path_handling: "v1",
                //当通过其中之一paths匹配路由时，从上游请求 URL 中去除匹配的前缀。默认为true.
                strip_path: false,
                //当多个路由同时使用正则表达式匹配时，用于选择哪个路由解析给定请求的数字。
                //当两条路由与路径匹配并且具有相同的 时regex_priority，将使用较旧的（最低的created_at）。
                //请注意，非正则表达式路由的优先级是不同的（较长的非正则表达式路由在较短的路由之前匹配）。默认为0.
                regex_priority: 0,
                //通过hosts域名之一匹配路由时，请使用Host上游请求标头中的请求标头  如果设置为false，上游标Host头将是服务的host.
                preserve_host: false,
                methods:[],
            };
            this.resetForm("form");
        },
        // 服务列表
        getServices(){
            kongServiceList().then(res=>{
                // console.log(JSON.stringify(res));
                if(!res.rows){
                    return;
                }
                this.services=res.rows;
            }).catch(err =>{

            });            
        }
    }
}
</script>